<template>
  <div class="card__container">
    <el-card v-loading="loading" shadow="hover" class="card__content">
      <h4 slot="header" class="card__header">
        <span>看诊记录</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="handleVisible"
        >
          添加
        </el-button>
      </h4>
      <el-form size="mini">
        <el-form-item
          v-for="seeing in seeingList"
          :key="seeing.id"
          :label="seeing.createTime"
        >
          现场TC：{{ seeing.userName }} 详情：{{ seeing.result }}
        </el-form-item>
      </el-form>
    </el-card>
    <div class="card__content">
      <el-card v-if="visible" shadow="hover" class="card__content">
        <p class="card__p">请添加新的看诊记录</p>
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item prop="result">
            <el-input
              v-model="form.result"
              class="card__input"
              type="textarea"
              :rows="3"
              placeholder="可填写顾客主诉、检查发现、是否面诊、设计方案、是否成交、可开发的、未成交原因等"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" :loading="formLoading" @click="handleSubmit">
          确定
        </el-button>
        <el-button @click="handleVisible">取消</el-button>
      </el-card>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { addRunning, listRunning } from '@/api/services/running'

const FORM_DATA = {
  result: undefined,
}

export default {
  name: 'Seeing',
  props: {
    patient: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loading: false,
      visible: true,
      seeingList: [],
      formLoading: false,
      form: {},
      rules: {
        result: [
          { required: true, message: '看诊结果不能为空', trigger: 'blur' },
        ],
      },
    }
  },
  computed: {
    ...mapState({
      userName: (state) => state.user.name,
      userId: (state) => state.user.userId,
    }),
  },
  watch: {
    visible(val) {
      if (val) {
        this.init()
      } else {
        this.$refs.form.resetFields()
      }
    },
  },
  mounted() {
    this.init()
    this.getListRunning()
  },
  methods: {
    init() {
      this.form = { ...FORM_DATA }
    },
    async getListRunning() {
      try {
        this.loading = true
        const { rows } = await listRunning({
          orderByColumn: 'createTime',
          isAsc: 'desc',
          clinicPersonId: this.patient.id,
        })
        this.seeingList = rows
      } finally {
        this.loading = false
      }
    },
    handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        try {
          if (!valid) {
            return
          }
          this.formLoading = true
          const { id: clinicPersonId } = this.patient
          const formData = {
            ...this.form,
            userName: this.userName,
            userId: this.userId,
            clinicPersonId,
            type: 1,
          }
          await addRunning(formData)
          this.msgSuccess('添加成功')
          this.handleVisible()
          await this.getListRunning()
        } finally {
          this.formLoading = false
        }
      })
    },
    handleVisible() {
      this.visible = !this.visible
    },
  },
}
</script>

<style lang="scss" scoped>
.card__container {
  width: 100%;
  display: flex;

  &:first-child {
    margin-bottom: 20px;
  }

  .card__content {
    flex: 1;

    &:first-child {
      margin-right: 20px;
    }

    .card__header,
    .card__p {
      margin: 0;
    }

    .card__p,
    .card__input {
      margin-bottom: 15px;
    }

    .card__p {
      font-size: 14px;
    }
  }
}
</style>
